<template>
  <div class="clearfix leader-board-con">
      <div class="fl l-b-l">
          <!-- 云音乐特色榜 -->
          <div>
              <span class="fs14 mb30 list-title">云音乐特色榜</span>
              <ul class="list-ul mt10">
                  <li class="list-li clearfix" v-for="(item, i) in toplistArr" :key=item.id
                  @click="changeActiveIndex(i)">
                      <div class="list-cover fl">
                          <img class="list-img disinblock" :src="item.coverImgUrl" />
                      </div>
                      <div class="fl ml20">
                          <p class="list-name fs12">{{ item.name }}</p>
                          <p class="list-desc fs12 fc999 mt15">{{ item.updateFrequency }}</p>
                      </div>
                      
                  </li>
              </ul>
          </div>
      </div>
      <div class="fl l-b-r">
          <leaderboard-detail :toplistArr=toplistArr :curTopList=curTopList :curTopListSongs=curTopListSongs></leaderboard-detail>
      </div>
  </div>
</template>

<script>
import leaderboardDetail from './leaderboardDetail.vue'
export default {
    name: "leaderboard",
    data() {
      return {
        toplistArr: [], // 所有排行榜
        curTopList: [], // 当前排行榜
        specialList: [],
        globalMediaList: [],
        activeIndex: 0,
        curTopListSongs: []
      }
    },
    mounted() {
      this.getTopListDetail().then(() => {
          this.getCurTopList(this.toplistArr[0].id)
      })
    },
    methods: {
        async getTopListDetail() {
            try {
              let res = await this.$api.getTopListDetail()
              this.toplistArr = res.data.list
              this.toplistArr.forEach(item => {
                if (item.ToplistType) {
                    this.specialList.push(item)
                } else {
                    this.globalMediaList.push(item)
                }
              })
            } catch(err) {
                console.log('getTopListDetail:', err)
            }
        },
        async getCurTopList(id) {
            console.log('获取当前排行榜')
            try {
                let param = {
                    id: id
                }
                let res = await this.$api.getPlayListDetail(param)
                this.curTopListSongs = res.data.playlist.tracks
                this.curTopList = res.data.playlist
            } catch(err) {
                console.log(err)
            }
        },
        changeActiveIndex(i) {
            this.activeIndex = i
        }
    },
    watch: {
        activeIndex() {
            this.getCurTopList(this.toplistArr[this.activeIndex].id)
        }
    },
    components: {
      leaderboardDetail
    }
}
</script>

<style lang="less" scoped>
.leader-board-con {
    width: 1100px;
    height: auto;
    background-color: white;
    margin: 0 auto;
    .list-title {
      font-weight: 540;
    }
    .l-b-l {
        width: 240px;
        height: auto;
        background-color: #f8f8f8;
        border: 1px solid #d4d4d4;
        padding-top: 45px;
        padding-left: 15px;
    }
    .l-b-r {
        width: calc(100% - 304px);
        height: auto;
        padding-top: 45px;
        padding-left: 45px;
    }
    .list-ul {
        .list-li {
            cursor: pointer;
            padding: 10px 0 10px 10px;
            .list-img {
                width: 50px;
                height: 50px;
                background-color: pink;
            }
            &:hover {
                background-color: #f4f2f2;
            }
        }
    }
}
</style>